<template>
  <ul class="user_Overview">
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online">
        {{
          userOverview && userOverview.onlineCount
            ? toPercent(userOverview.onlineCount)
            : 0
        }}
      </div>
      <p>在线</p>
    </li>
    <li class="user_Overview-item" style="color: #e3b337">
      <div class="user_Overview_nums offline">
        {{
          userOverview && userOverview.offlineCount
            ? toPercent(userOverview && userOverview.offlineCount)
            : 0
        }}
      </div>
      <p>离线</p>
    </li>
    <li class="user_Overview-item" style="color: #f5023d">
      <div class="user_Overview_nums laramnum">
        {{
          userOverview && userOverview.alarmCount
            ? toPercent(userOverview.alarmCount)
            : 0
        }}
      </div>
      <p>故障</p>
    </li>
  </ul>
</template>

<script>
let style = {
  fontSize: 24,
};
import { mapState } from "vuex";

export default {
  data() {
    return {
      options: {},
      config: {
        number: [100],
        content: "{nt}",
        style: {
          ...style,
          fill: "#00fdfa",
        },
      },
      onlineconfig: {
        number: [0],
        content: "{nt}",
        style: {
          ...style,
          fill: "#07f7a8",
        },
      },
      offlineconfig: {
        number: [0],
        content: "{nt}",
        style: {
          ...style,
          fill: "#e3b337",
        },
      },
      laramnumconfig: {
        number: [0],
        content: "{nt}",
        style: {
          ...style,
          fill: "#f5023d",
        },
      },
      userOverview: {},
    };
  },
  computed: {
    toPercent(val) {
      return function (val) {
        return val
          ? Math.round((val / this.userOverview.totalCount) * 10000) / 100 + "%"
          : 0 + "%";
      };
    },
    ...mapState(["mapWarn"]),
  },

  watch: {
    mapWarn: {
      handler(val) {
        this.userOverview = val;
      },
      deep: true, //对象内部的属性监听，也叫深度监听
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";

.user_Overview {
  @include flexLayout(center, center);
  padding: 0;

  li {
    flex: 1;
    list-style: none;
    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      height: 150px;
      text-align: center;
      line-height: 150px;
      font-size: 1rem;
      padding-left: 5px;
      margin: 50px auto 0px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: 130px auto !important;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background: url("~@/assets/img/left_top_lan.png") center no-repeat;
      }
    }

    .online {
      &::before {
        background: url("~@/assets/img/left_top_lv.png") center no-repeat;
      }
    }

    .offline {
      &::before {
        background: url("~@/assets/img/left_top_huang.png") center no-repeat;
      }
    }

    .laramnum {
      &::before {
        background: url("~@/assets/img/left_top_hong.png") center no-repeat;
        filter: hue-rotate(45deg);
      }
    }
  }
}
</style>
